*{
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 居中显示 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 渐变背景 */
    background: linear-gradient(200deg,#f5f7fa,#c3cfe2);
}
.container{
    /* 相对定位 */
    position:  relative;
    /* 设置视距 */
    perspective: 50px;
}
.text{
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 50px 70px;
    background-color: rgba(124,189,174,0.65);
    color: rgba(0,0,0,0.85);
    text-align: center;
    letter-spacing: 6px;
    font-weight: 100;
    cursor: pointer;
    /* 背景模糊 */
    backdrop-filter: blur(6px);
    /* 过渡效果 */
    transition: 0.25s ease-in-out;
}
.text h2{
    font-size: 30px;
    font-weight: 100;
    margin-bottom: 10px;
}
.image{
    /* 绝对定位 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    /* 视距 */
    perspective: 50px;
    /* 执行动画：动画名 时长 线性的 无限次播放 */
    animation: rotate 10s linear infinite;
}
/* 四个方位图片的统一样式 */
.image .part{
    width: 250px;
    height: 150px;
    /* 设置背景图片 */
    /* 在这里给大家分享一个可以获取随机图片且宽高可以自定义的宝藏网站【https://picsum.photos】，后面的500、300代表图片的宽度、高度 */
    background-image: url('https://picsum.photos/500/300');
    background-repeat: no-repeat;
    /* 绝对定位 居中 */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -125px;
    margin-top: -75px;
    /* 过渡效果：时长 贝塞尔曲线 */
    transition: 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}
/* 分别设置四个方位图片的显示区域、位置、旋转角度 */
.image .part-1{
    transform: translate(-63%,-68%) rotate3d(1,-1,-1,3deg);
    background-position: top left;
}
.image .part-2{
    transform: translate(71%,-68%) rotate3d(1,1,-1,3deg);
    background-position: top right;
}
.image .part-3{
    transform: translate(-65%,71%) rotate3d(-1,-1,-1,3deg);
    background-position: bottom left;
}
.image .part-4{
    transform: translate(70%,73%) rotate3d(-1,1,-1,3deg);
    background-position: bottom right;
}
/* 文本悬停 */
.text:hover{
    opacity: 0;
    transform: translateY(-16px);
}
/* 文本悬停，取消图片区域的动画 */
.text:hover + .image{
    animation: none;
}
/* 文本悬停，设置四个方位图片的位置、过渡动画延迟时间 */
.text:hover + .image .part-1{
    transform: translate(-50%,-50%);
    transition-delay: 0.2s;
}
.text:hover + .image .part-2{
    transform: translate(50%,-50%);
    transition-delay: 0.15s;
}
.text:hover + .image .part-3{
    transform: translate(-50%,50%);
    transition-delay: 0.3s;
}
.text:hover + .image .part-4{
    transform: translate(50%,50%);
    transition-delay: 0.25s;
}

/* 定义动画 */
@keyframes rotate {
    0%{
        transform: rotate3d(1.9, 0.2, 0, 1deg);
    }
    25%{
        transform: rotate3d(1.5, -1.1, 0, 1deg);
    }
    50%{
        transform: rotate3d(1.3, -1.7, 0, 1deg);
    }
    75%{
        transform: rotate3d(-1.5, -1.2, 0, 1deg);
    }
    100%{
        transform: rotate3d(1.9, 0.2, 0, 1deg);
    }
}